.container {
  position: relative;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background-image: url('https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80');
  background-size: cover;
}

.grid {
  width: auto;
  height: unset;
  justify-content: unset;
}

.stageGrid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: auto;
  height: 100%;
  width: 100%;
  justify-items: center;
}

.slider {
  position: absolute;
  bottom: 0;
  width: 100%;
  max-width: 50rem;
  height: 80%;
  padding: 1rem;
  left: 50%;
  transform: translateX(-50%);
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  background-color: var(--lk-bg3);
  transition: bottom 1s;

  display: grid;
  grid-template-rows: min-content 1fr min-content;
}

section.participant-tile {
  --size: 6rem;
  position: relative;
  width: var(--size);
  height: var(--size);
  min-width: unset;

  .avatar-container {
    border: 3px transparent solid;
    transition: border-color 0.1s linear;
    border-radius: 9999999px;
    .avatar {
      background-color: beige;
      align-items: center;
      overflow: hidden;
      border-radius: 9999999px;

      display: grid;
      aspect-ratio: 1 / 1;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .mic-container {
    position: absolute;
    background-color: var(--lk-danger);

    bottom: 7%;
    right: 7%;
    border-radius: 999999px;
    transition: opacity 0.2s ease-in-out;
    border: 2px var(--lk-bg3) solid;
    padding: 0.2rem;
    div {
      aspect-ratio: 1/1;
      display: grid;
      place-content: center;
      .mic {
        margin-inline-end: unset;
        margin: 0.2rem;
        opacity: 1;
      }
    }
  }
}
